<template>
  <!-- 白名单 -->
  <div>
    <el-dialog
      class="dia-style"
      title="白名单"
      :visible.sync="open"

      :close-on-click-modal="false"
      width="1000px"
      @close="cancel"
    >
      <div class="full">
        <!-- 左侧 -->
        <div class="left">
          <div class="left-son">
            <img src="../../../../assets/images/exchange_0.svg" alt="">
            <div class="right-box">
              <p>主体设备</p>
              <div style="display:flex;align-items: center">
                个数： <span class="num">{{ equipNum }}</span>
              </div>
            </div>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form
                ref="queryForm"
                :model="queryParams"
                size="small"
                :inline="true"
              >
                <el-form-item>
                  <el-input
                    v-model="queryParams.keyword"
                    placeholder="关键字"
                    clearable
                    style="width: 240px"
                    @keyup.enter.native="getList"
                  />
                </el-form-item>

                <el-form-item>
                  <el-button
                    type="primary"
                    icon="el-icon-search"
                    size="mini"
                    @click="getList"
                  >查询</el-button>
                </el-form-item>
              </el-form>
            </el-col>

            <el-col :span="1.5">
              <el-button
                type="primary"
                icon="el-icon-plus"
                size="mini"
                @click="handleAdd"
              >新增</el-button>
              <el-button
                plain
                size="mini"
                :disabled="ids.length == 0"
                @click="handleDelete"
              >批量删除
              </el-button>
            </el-col>
          </el-row>

          <hk-table
            ref="tableRef"
            :loading="loading"
            :table-data="tableData"
            :table-columns="tableList"
            :selection="true"
            :show-index="true"
            :total="total"
            :operate="true"
            :query-params="queryParams"
            @handleSelectionChange="handleSelectionChange"
            @changePage="getList"
          >
            <template #hostType="scope">
              <span v-if="scope.row.hostType">{{
                scope.row.hostType == 'terminal'
                  ? '终端'
                  : scope.row.hostType == 'server'
                    ? '服务器'
                    : scope.row.hostType == 'networkDevice'
                      ? '网络设备'
                      : scope.row.hostType == 'storageDevice'
                        ? '存储设备'
                        : scope.row.hostType == 'other'
                          ? '其他'
                          : ''
              }}</span>
            </template>

            <template #operate="scope">
              <!-- <el-button
                size="mini"
                type="text"
                @click="handleUpdate(scope.row)"
                >修改
              </el-button> -->
              <el-button
                size="mini"
                type="text"
                @click="handleDelete(scope.row)"
              >删除
              </el-button>
            </template>
          </hk-table>
        </div>
      </div>

      <div slot="footer" class="dialog-footer">
        <!-- 标签选择页 -->
        <!-- <el-button type="primary" @click="confirm">确 定</el-button> -->
        <el-button @click="cancel">关 闭</el-button>
      </div>
    </el-dialog>
    <TransferDialog
      ref="transferRef"
      :transfer-id="transferId"
      :metrics-code="kpiCode"
      @handleSave="getList"
    />
  </div>
</template>

<script>
import HkTable from '@/components/Hk-Table/index.vue'
import TransferDialog from './transferDialog.vue'
import {
  getotal,
  getWhiteListPagetotal,
  deleteBatch
} from '@/api/icp/labelClassDisplay'
export default {
  components: { HkTable, TransferDialog },
  props: {
    transferId: {
      type: String,
      default() {
        return ''
      }
    },
    kpiCode: {
      type: String,
      default() {
        return ''
      }
    }
  },
  data() {
    return {
      loading: false,
      open: false,
      queryParams: {
        size: 10,
        current: 1
      },
      // 设备数量
      equipNum: 0,
      // 选中数组
      ids: [],
      // 总条数
      total: 0,
      // 表格数据
      tableData: [],
      //  表格
      tableList: [
        { label: 'IP', param: 'ip' },
        { label: 'MAC', param: 'mac' },
        { label: '主机类型', param: 'hostType', type: 'slot' },
        { label: '责任人名', param: 'username' },
        { label: '组织机构名称', param: 'orgName' }
      ]
    }
  },
  mounted() {},
  methods: {
    // 获取初始值
    getData() {
      getotal(this.transferId).then((res) => {
        this.equipNum = res.total
      })
    },
    // 获取列表
    getList(val) {
      this.getData()
      this.loading = true
      this.queryParams = {
        ...this.queryParams,
        ...val,
        scrollToTop: true,
        ruleId: this.transferId
      }
      getWhiteListPagetotal(this.queryParams).then((res) => {
        this.total = res.total
        this.tableData = res.list
        this.loading = false
        this.queryParams.scrollToTop = false
      })
    },
    // 打开页面
    show() {
      this.open = true

      this.getList()
    },
    // 关闭弹窗
    cancel() {
      this.open = false
    },
    // 保存弹窗
    confirm() {
      this.open = false
    },
    // 新增按钮
    handleAdd() {
      this.$refs.transferRef.show()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const id = row.id || this.ids.join(',')
      console.log(id)
      this.$modal
        .confirm('此操作将在白名单中移除该设备, 确定删除吗 ?')
        .then(function() {
          return deleteBatch(id)
        })
        .then(() => {
          this.$modal.msgSuccess('白名单列表删除成功')
          this.getList()
        })
        .catch(() => {})
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      return new Promise((resolve) => {
        this.title = '编辑'
        resolve(this.title)
      }).then(() => {
        this.$refs.editDialogRef.show()
      })
      // queryData(id).then((res) => {
      //   this.form = res;
      // });
    }
  }
}
</script>

<style lang="scss" scoped>
.full {
  font-size: 14px;
  width: 100%;
  height: 500px;
  display: flex;
  .left {
    width: 188px;
    height: 100%;
    margin-right: 20px;
    .left-son {
      display: flex;
      padding: 10px 20px;
      align-items: center;
      width: 100%;
      height: 72px;
      //background: #e4eeff;
      border: 1px solid #2979ff;
      border-radius: 4px;
      position: relative;
      .right-box {
        margin-left: 10px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        p{
          margin: 10px 0;
        }
        .num {
          color: #2979ff;
          margin-left: 10px;
        }
      }
    }
  }
  .right {
    flex: 1;
    display: flex;
    flex-direction: column;
    .targetTable {
      flex: 1;
    }
  }
}
</style>
